import { defineComponent, reactive, ref, Ref, watchEffect } from "vue"
import MonacoEditor from "@/components/MonacoEditor"
import * as Monaco from "monaco-editor"
import demos from "./demo"
import { useStyles } from "./style/app"
import SearchForm from "../lib/SearchForm"

type Schema = any
type UiSchema = any

const toJson = (value: any) => {
  return JSON.stringify(value, null, 2)
}
export default defineComponent({
  setup(prop) {
    const selectRef = ref(0)
    const demo: {
      schema: Schema | null
      data: any
      uiSchema: UiSchema | null
      schemaCode: string
      dataCode: string
      uiSchemaCode: string
    } = reactive({
      schema: null,
      data: {},
      uiSchema: {},
      schemaCode: "",
      dataCode: "",
      uiSchemaCode: "",
    })
    const classRef = useStyles()

    watchEffect(() => {
      const index = selectRef.value
      const d = demos[index]
      demo.schema = d.schema
      demo.data = d.data
      demo.uiSchema = d.uiSchema
      demo.schemaCode = toJson(d.schema)
      demo.dataCode = toJson(d.data)
      demo.uiSchemaCode = toJson(d.uiSchema)
      // const d = demos[index];
    })

    const handleCodeChange = (
      field: "schema" | "data" | "uiSchema",
      value: string
      //   e: Monaco.editor.IModelContentChangedEvent
    ) => {
      try {
        const json = JSON.parse(value)
        demo[field] = json
        ;(demo as any)[`${field}Code`] = value
      } catch (err) {
        console.log(err)
      }
    }
    const handleSchemaChange = (v: string) => handleCodeChange("schema", v)
    const handleDataChange = (v: string) => handleCodeChange("data", v)
    const handleUiSchemaChange = (v: string) => handleCodeChange("uiSchema", v)
    return () => {
      const classes = classRef.value
      return (
        <div>
          <div class={classes.top}>
            {demos.map((it, index) => {
              return (
                <div
                  class={{
                    [classes.button]: true,
                    [classes.buttonSelect]: index === selectRef.value,
                  }}
                  onClick={() => (selectRef.value = index)}
                >
                  {it.name}
                </div>
              )
            })}
          </div>
          <div class={classes.containier}>
            <div class={classes.left}>
              <div class={classes.scheme}>
                <MonacoEditor
                  class={classes.editor}
                  title="scheme"
                  onChange={handleSchemaChange}
                  code={demo.schemaCode}
                ></MonacoEditor>
              </div>
              <div class={classes.uiScheme}>
                <MonacoEditor
                  class={classes.editor}
                  title="uiSeheme"
                  onChange={handleUiSchemaChange}
                  code={demo.uiSchemaCode}
                ></MonacoEditor>
                <MonacoEditor
                  class={classes.editor}
                  title="初始值"
                  onChange={handleDataChange}
                  code={demo.dataCode}
                ></MonacoEditor>
              </div>
            </div>
            <div class={classes.right}>
              <SearchForm></SearchForm>
            </div>
          </div>
        </div>
      )
    }
  },
})
